<template>

	<view class="main">


		<u-swiper class="ysa" height="350" style="position: fixed;top: 0;" :list="CarouselListData"></u-swiper>

		<view class="center" style="position: fixed;top:80rpx;width: 100%;">
			爱牙牙口腔
		</view>


		<view class="info">

			<view class="row space-between">

				<view @click="toUrl('/pages/index/yygh')" class="topa">
					<image class="ysa" src="/static/images/yyaa.png"></image>
					<view class="zzyy">自助预约</view>
					<view class="xsyy">线上预约 免排队</view>
					<view class="ljyy center">立即预约</view>
				</view>

				<view class="column">

					<view class="pszx" @click="toUrl('/pages/index/kszx')">
						<view class="pszxtitle">快速咨询</view>
						<view class="mfwd">免费1V1快速答疑</view>
						<image class="ysb" src="/static/images/ysb.png"></image>
					</view>


					<view class="pszxb" @click="toUrl('/pages/index/dddh')">
						<view class="pszxtitleb">到店导航</view>
						<view class="mfwdb">一城多店 就诊方便</view>
						<image class="ysbb" src="/static/images/ysc.png"></image>
					</view>

				</view>
			</view>

			<view class="row tit">
				<view class="shuxian"></view>
				<view class="title">爱牙攻略</view>
			</view>

			<view class="row space-between">
				<image v-for="(item, index) in BrandTweetListData" :key="index" class="ysd" :src="item.cover"></image>
			</view>

			<view class="row tit">
				<view class="shuxian"></view>
				<view class="title">门店介绍</view>
			</view>


			<view class="row space-between" style="margin-bottom: 50rpx;">

				<view class="column">
					<image class="ysf" :src="BrandIntroductionData[0].url"></image>
					<image class="ysg" :src="BrandIntroductionData[1].url"></image>
				</view>

				<view class="column">
					<image class="ysh" :src="BrandIntroductionData[2].url"></image>
					<image class="ysi" :src="BrandIntroductionData[3].url"></image>
					<image class="ysj" :src="BrandIntroductionData[4].url"></image>
				</view>

			</view>


		</view>
	</view>

</template>

<script>
	import api_index from '@/api/index.js';

	export default {
		components: {

		},
		async onLoad(option) {
			console.log(uni.$u.config.v);
		},

		async onShow() {
			//获取轮播列表
			this.getCarouselListFuc();


			//获取品牌推文列表
			this.getBrandTweetListFuc();

			//获取品牌介绍列表
			this.getBrandIntroductionListFuc();
		},

		data() {
			return {
				CarouselListData: [], //轮图图
				BrandTweetListData: [], //获取品牌推文列表
				BrandIntroductionData: [], //获取品牌介绍列表

			};
		},
		methods: {

			toUrl(url) {
				this.navTo(url);
			},

			//获取轮播列表
			async getCarouselListFuc() {
				const res = await api_index.getCarouselList();
				if (res.code == 1) {
					var list = res.data.list
					this.CarouselListData = list.map(list => list.image);
				} else {
					this.$util.msg(res.message);
					return;
				}
			},

			//获取品牌推文列表
			async getBrandTweetListFuc() {
				const res = await api_index.getBrandTweetList();
				if (res.code == 1) {
					this.BrandTweetListData = res.data.list
				} else {
					this.$util.msg(res.message);
					return;
				}
			},

			//获取品牌介绍列表
			async getBrandIntroductionListFuc() {
				const res = await api_index.getBrandIntroductionList();
				if (res.code == 1) {
					this.BrandIntroductionData = res.data.images
					console.log('111111122222222', this.BrandIntroductionData);
				} else {
					this.$util.msg(res.message);
					return;
				}
			},

		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.info {
		width: 100%;

		min-height: 1000rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: absolute;

		top: 540rpx;
		padding: 50rpx 32rpx 32rpx 32rpx;
	}

	.ysa {
		width: 320rpx;
		height: 272rpx;
		background: #EAFAFA;
		border-radius: 10rpx;
	}





	.tit {
		margin: 48rpx 0;
	}

	.shuxian {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.title {

		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.9);

	}

	.ysd {
		width: 335rpx;
		height: 160rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.yse {
		width: 335rpx;
		height: 160rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}




	.ysf {
		width: 340rpx;
		height: 378rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.ysg {
		width: 340rpx;
		height: 158rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 10rpx;
	}

	.ysh {
		width: 340rpx;
		height: 178rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.ysi {
		width: 340rpx;
		height: 178rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 6rpx;
	}

	.ysj {
		width: 340rpx;
		height: 178rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 6rpx;
	}

	.zzyy {
		font-weight: 400;
		font-size: 28rpx;
		color: #1FA194;
		position: absolute;
		top: 24rpx;
		left: 30rpx;
	}

	.xsyy {
		font-weight: 400;
		font-size: 20rpx;
		color: #1FA194;
		position: absolute;
		top: 80rpx;
		left: 30rpx;

	}

	.ljyy {
		width: 144rpx;
		height: 44rpx;
		background: #27CCBB;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		position: absolute;
		top: 160rpx;
		left: 30rpx;
	}

	.topa {
		position: relative;

	}

	.pszx {
		width: 350rpx;
		height: 128rpx;
		background: #F4F6FC;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx;
	}

	.pszxtitle {
		font-weight: 400;
		font-size: 28rpx;
		color: #287FFF;
		position: relative;
	}

	.mfwd {
		font-weight: 400;
		font-size: 20rpx;
		color: #287FFF;
	}

	.ysb {
		width: 128rpx;
		height: 128rpx;
		position: absolute;
		top: 50rpx;
		right: 50rpx;

	}


	.ysc {
		width: 128rpx;
		height: 128rpx;
		position: absolute;
		top: 50rpx;
		right: 50rpx;
	}

	.pszxb {
		width: 350rpx;
		height: 128rpx;
		background: #FDF7ED;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx;
		margin-top: 18rpx;
		position: relative;
	}

	.pszxtitleb {
		font-weight: 400;
		font-size: 28rpx;
		color: #FF8228;
		position: relative;
	}

	.mfwdb {
		font-weight: 400;
		font-size: 20rpx;
		color: #FF8228;
	}

	.ysbb {
		width: 128rpx;
		height: 128rpx;
		position: absolute;
		top: 0rpx;
		right: 20rpx;

	}
</style>